-
Notifications
You must be signed in to change notification settings - Fork 351
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Interactive Graph] Add example function area for locked function settings #1600
[Interactive Graph] Add example function area for locked function settings #1600
Conversation
Adjust styling of content list to match other settings.
GeraldRequired Reviewers
Don't want to be involved in this pull request? Comment |
npm Snapshot: PublishedGood news!! We've packaged up the latest commit from this PR (f396ccd) and published it to npm. You Example: yarn add @khanacademy/perseus@PR1600 If you are working in Khan Academy's webapp, you can run: ./dev/tools/bump_perseus_version.sh -t PR1600 |
Size Change: +972 B (+0.11%) Total Size: 861 kB
ℹ️ View Unchanged
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #1600 +/- ##
==========================================
- Coverage 70.58% 70.32% -0.26%
==========================================
Files 547 573 +26
Lines 107178 111820 +4642
Branches 7831 11238 +3407
==========================================
+ Hits 75652 78642 +2990
- Misses 31335 33178 +1843
+ Partials 191 0 -191 see 1120 files with indirect coverage changes Continue to review full report in Codecov by Sentry.
|
Added a label for the category popup. Added a 'paste' button that directly changes the equation field to be the example function. Added/updated unit tests accordingly.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is so exciting!
{wrapper: RenderStateRoot}, | ||
); | ||
|
||
// Assert - "y" axis means "range" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I like your system of adding extra context to the arrange/act/assert comments. I'm gonna start doing this too.
@@ -45,34 +49,37 @@ const LockedFunctionSettings = (props: Props) => { | |||
onRemove, | |||
} = props; | |||
const equationPrefix = directionalAxis === "x" ? "y=" : "x="; | |||
const domainRangeText = directionalAxis === "x" ? "domain" : "range"; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice!
onClick={() => pasteEquationFn("equation", example)} | ||
size="medium" | ||
style={styles.copyPasteButton} | ||
/> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Optional suggestion: Since content authors usually use desktop + mouse/keyboard, I think it would be appropriate to use a title
prop here so that someone can hover over the icon to learn what it does.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Since <IconButton>
doesn't have a title
property available, I'm unable to add this directly. So, leaving this off for now.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
One more comment!
aria-label="paste example" | ||
aria-describedby={exampleId} | ||
onClick={() => pasteEquationFn("equation", example)} | ||
size="medium" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think if you use size="small"
here, it'll have the icons remain the same size, and the padding around them becomes smaller. This might be worth trying and seeing if the spacing looks better inline here? Let me know what you think.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, specifying "small" does keep the icon the same size. However, I'm going to keep it as is in order to keep the target area the current size (40px) as a best practice. If we get word from content creators that they prefer more space for the equation text, then we can adjust at that time.
This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @khanacademy/[email protected] ### Major Changes - [#1591](#1591) [`05d048026`](05d0480) Thanks [@handeyeco](https://github.com/handeyeco)! - Move interaction-editor sub-components into perseus-editor ### Minor Changes - [#1568](#1568) [`eddcb9417`](eddcb94) Thanks [@nishasy](https://github.com/nishasy)! - [Interactive Graph + Editor] Add a full graph aria-label and aria-description/describedby to interactive graphs, as well as the UI for content authors to add this in the interactive graph editor ### Patch Changes - [#1540](#1540) [`08068dc71`](08068dc) Thanks [@mark-fitzgerald](https://github.com/mark-fitzgerald)! - Resolve improperly scaled text/labels in Graphie images when viewed in mobile (constrained viewports) - [#1592](#1592) [`d88b0ffdf`](d88b0ff) Thanks [@benchristel](https://github.com/benchristel)! - Internal: Move tests, test data, and Storybook stories for the Interactive Graph widget to the directory specific to that widget. - [#1594](#1594) [`435f3f6d8`](435f3f6) Thanks [@benchristel](https://github.com/benchristel)! - Internal: Remove Storybook stories that generate random widgets - [#1599](#1599) [`71715afd2`](71715af) Thanks [@benchristel](https://github.com/benchristel)! - Internal: improve type safety of interactive graph editor - [#1590](#1590) [`6c4e9e154`](6c4e9e1) Thanks [@benchristel](https://github.com/benchristel)! - Internal: Move InteractiveGraphEditor to its own directory ## @khanacademy/[email protected] ### Minor Changes - [#1600](#1600) [`bdb382fda`](bdb382f) Thanks [@mark-fitzgerald](https://github.com/mark-fitzgerald)! - Interactive Graph - Add example functions for copy/paste to locked functions settings - [#1568](#1568) [`eddcb9417`](eddcb94) Thanks [@nishasy](https://github.com/nishasy)! - [Interactive Graph + Editor] Add a full graph aria-label and aria-description/describedby to interactive graphs, as well as the UI for content authors to add this in the interactive graph editor ### Patch Changes - [#1592](#1592) [`d88b0ffdf`](d88b0ff) Thanks [@benchristel](https://github.com/benchristel)! - Internal: Move tests, test data, and Storybook stories for the Interactive Graph widget to the directory specific to that widget. - [#1591](#1591) [`05d048026`](05d0480) Thanks [@handeyeco](https://github.com/handeyeco)! - Move interaction-editor sub-components into perseus-editor - [#1594](#1594) [`435f3f6d8`](435f3f6) Thanks [@benchristel](https://github.com/benchristel)! - Internal: Remove Storybook stories that generate random widgets - [#1599](#1599) [`71715afd2`](71715af) Thanks [@benchristel](https://github.com/benchristel)! - Internal: improve type safety of interactive graph editor - [#1590](#1590) [`6c4e9e154`](6c4e9e1) Thanks [@benchristel](https://github.com/benchristel)! - Internal: Move InteractiveGraphEditor to its own directory - Updated dependencies \[[`08068dc71`](08068dc), [`d88b0ffdf`](d88b0ff), [`eddcb9417`](eddcb94), [`05d048026`](05d0480), [`435f3f6d8`](435f3f6), [`71715afd2`](71715af), [`6c4e9e154`](6c4e9e1)]: - @khanacademy/[email protected] ## @khanacademy/[email protected] ### Patch Changes - [#1592](#1592) [`d88b0ffdf`](d88b0ff) Thanks [@benchristel](https://github.com/benchristel)! - Internal: Move tests, test data, and Storybook stories for the Interactive Graph widget to the directory specific to that widget. - [#1594](#1594) [`435f3f6d8`](435f3f6) Thanks [@benchristel](https://github.com/benchristel)! - Internal: Remove Storybook stories that generate random widgets Author: khan-actions-bot Reviewers: mark-fitzgerald Required Reviewers: Approved By: mark-fitzgerald Checks: ❌ codecov/project, ✅ codecov/patch, ✅ Upload Coverage (ubuntu-latest, 20.x), ⏭️ Publish npm snapshot, ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Jest Coverage (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ gerald Pull Request URL: #1597
Summary:
Having a list of sample functions available to quickly copy/paste into the locked function settings can be very helpful for content creators. This PR adds that capability, along with an updatable file (locked-function-examples.ts) for adding/modifying example functions.
Issue: LEMS-1948
Test plan:
Affected UI
New settings feature